<script setup lang="ts">
import {ref, reactive, computed} from "vue";
import Demo from "@/components/Demo.vue";
import Bar from "../../components/Bar.vue";

const isErr = ref(false);
const msg = computed(() => {
  return isErr.value ? 'ERROR' : 'SUCCESS';
});
const classes = reactive({
  'bg-primary-subtle': true,
});
const p3 = ref('p-3')
const m3 = ref('m-3')
const rounded3 = ref('rounded-3')
const border = ref('border')
const shadow = ref('shadow')

const styleObject=reactive({
  color: 'red',
  fontSize: '30px',
});

</script>

<template>
  <div class="p-3 m-3 rounded-3 shadow">
    <p class="p-3 border rounded-3" :class="{'bg-danger-subtle':isErr,'bg-success-subtle':!isErr}">{{ msg }}</p>
    <p>绑定对象</p>
    <p class="p-3 border rounded-3" :class="classes">hello-world</p>
    <p>绑定数组</p>
    <p :class="[m3,p3,border,shadow,rounded3]">hello world</p>
    <p>在组件使用 样式与类绑定</p>
    <div class="shadow border rounded-3 shadow">
      <Demo class="m-3 p-3 rounded-3"/>
    </div>
    <div class="shadow border rounded-3 shadow">
      <Bar class="m-3 p-3 rounded-3 shadow"/>
    </div>
  </div>
  <div class="p-3 m-3 border rounded-3 shadow">
      <h4>绑定内联样式</h4>
      <p :style="styleObject">hello-world</p>
  </div>




  <div class="p-3 m-3 rounded-3 border shadow">
    <p>字体背景颜色 text-bg-{color}</p>
    <p class="p-3 rounded-3 text-bg-primary">primary</p>
    <p class="p-3 rounded-3 text-bg-secondary">secondary</p>
    <p class="p-3 rounded-3 text-bg-success">success</p>
    <p class="p-3 rounded-3 text-bg-danger">danger</p>
    <p class="p-3 rounded-3 text-bg-warning">warning</p>
    <p class="p-3 rounded-3 text-bg-info">info</p>
    <p class="p-3 rounded-3 text-bg-light">light</p>
  </div>
  <div class="p-3 m-3 rounded-3 border shadow">
    <p>背景颜色：bg-{color}-subtle</p>
    <p class="p-3 rounded-3 bg-primary-subtle">bg-primary-subtle</p>
    <p class="p-3 rounded-3 bg-secondary-subtle">bg-secondary-subtle</p>
    <p class="p-3 rounded-3 bg-success-subtle">bg-success-subtle</p>
    <p class="p-3 rounded-3 bg-danger-subtle">bg-danger-subtle</p>
    <p class="p-3 rounded-3 bg-warning-subtle">bg-warning-subtle</p>
    <p class="p-3 rounded-3 bg-info-subtle">bg-info-subtle</p>
    <p class="p-3 rounded-3 bg-light-subtle">bg-light-subtle</p>
  </div>
  <div class="p-3 m-3 rounded-3 border shadow">
    <p>边框颜色：border-{color}-subtle</p>
    <p class="p-3 rounded-3 border border-primary-subtle border-3">border-primary-subtle</p>
    <p class="p-3 rounded-3 border border-secondary-subtle border-3">border-secondary-subtle</p>
    <p class="p-3 rounded-3 border border-success-subtle border-3">border-success-subtle</p>
    <p class="p-3 rounded-3 border border-danger-subtle border-3">border-danger-subtle</p>
    <p class="p-3 rounded-3 border border-warning-subtle border-3">border-warning-subtle</p>
    <p class="p-3 rounded-3 border border-info-subtle border-3">border-info-subtle</p>
    <p class="p-3 rounded-3 border border-light-subtle border-3">border-light-subtle</p>
  </div>
  <div class="p-3 m-3 rounded-3 border shadow">
    <p>字体加重颜色：text-{color}-emphasis</p>
    <p class="p-3 rounded-3 text-primary-emphasis bg-primary-subtle">text-primary-emphasis</p>
    <p class="p-3 rounded-3 text-secondary-emphasis bg-secondary-subtle">text-secondary-emphasis</p>
    <p class="p-3 rounded-3 text-success-emphasis bg-success-subtle">text-success-emphasis</p>
    <p class="p-3 rounded-3 text-warning-emphasis bg-warning-subtle">text-warning-emphasis</p>
    <p class="p-3 rounded-3 text-info-emphasis bg-info-subtle">text-info-emphasis</p>
    <p class="p-3 rounded-3 text-light-emphasis bg-light-subtle">text-light-emphasis</p>
  </div>
</template>

<style scoped>

</style>